<template>
  <div class="main">
    <div class="title">
      Interaction Predict in VRPbase

      <div class="subTitle">This is to predict whether two sequences interact with each other. Here, the user can enter two fasta sequences, one with a length of no more than 30 nt and the other with unlimited length. For more information see <span class="a" @click="toHelpClick">HELP</span> page.</div>
    </div>
    <el-form :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
             :hide-required-asterisk="true"
             label-width="130px"
             class="ruleForm">

      <div class="itemTitle">Type/paste query sequences in FASTA format(The length cannot exceed 30nt):
      </div>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="" prop="sequence1">
            <el-input type="textarea" v-model="ruleForm.sequence1"
                      :rows="11"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item style="display: flex;">
        <div class="exampleBtn" @click="eg1CLick">Example Sequence Nucleotide</div>
      </el-form-item>

      <div class="itemTitle" style="margin-top: 40px">Type/paste query sequences in FASTA format(The length cannot exceed 10000nt):
      </div>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="" prop="sequence2">
            <el-input type="textarea" v-model="ruleForm.sequence2"
                      :rows="11"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item style="display: flex;">
        <div class="exampleBtn" @click="eg2CLick">Example Sequence Nucleotide</div>
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="energy :" prop="energy">
            <el-input class="inputWidth input" v-model="ruleForm.energy" placeholder="eg. 1.0"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="score :" prop="score">
            <el-input class="inputWidth input" v-model="ruleForm.score" placeholder="eg. 140"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-form-item style="display: flex;justify-content: center">
        <el-button @click="resetForm('ruleForm')">Reset</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">Run</el-button>
      </el-form-item>
    </el-form>

    <div v-loading="loading" v-if="txtPre != null">
      <div class="result">
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div>Predict result :</div>
          <div class="download">
            <div class="btn" @click="downloadClick">
              <span class="titl">Download data</span>
              <i class="el-icon-download"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="subTitle">
        A detailed description of the predicted results is provided in the <router-link class="a" to="/help">HELP</router-link> documentation.
      </div>
      <pre class="pre" v-html="txtPre"></pre>
    </div>

  </div>
</template>

<script>

import {exportHost, exportVirus, predict} from "../../api/interaction";
import {isNumber} from "../../utils/validate";

export default {
  name: "predict",
  components: {},
  data() {

    var energyNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('energy can\'t be empty'));
      }
      if (!isNumber(value)) {
        return callback(new Error('energy must be a number'));
      }
      callback();
    };

    var scoreNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('score can\'t be empty'));
      }
      if (!isNumber(value)) {
        return callback(new Error('score must be a number'));
      }
      if (Math.sign(value) == -1) {
        return callback(new Error('score must be a positive number'));
      }
      callback();
    };

    return {
      src: process.env.NODE_ENV == 'production' ? '/VRPbase/static/kablamview/test2.html' : '/static/kablamview/test2.html',
      ruleForm: {
        sequence1: null,
        sequence2: null,
        energy: null,
        score: null,
      },
      loading: false,
      rules: {
        sequence1: [
          {required: true, message: 'Sequence can\'t be empty', trigger: 'blur'}
        ],
        sequence2: [
          {required: true, message: 'Sequence can\'t be empty', trigger: 'blur'}
        ],
        energy: [
          {required: true, validator: energyNum}
        ],
        score: [
          {required: true, validator: scoreNum}
        ],
      },
      eg1: ">test1\n" +"ACAAGCAAAUUUAUGAAGUU",
      eg: ">test2\n" +
          "ATGACGTTTCCTAGGGCATTGACTGTCATAGATGACAATGGAATGGTCATTAACATCATTTTCTGGTTCCTGTTGATAATTATATTGATATTACTTTCAATAGCATTGCTAAATATAATTAAGCTATGCATGGTGTGTTGCAATTTAGGAAGGACAGTTATTATTGTTCCAGCGCAACATGCTTACGATGCCTATAAGAATTTTATGCGAATTAAAGCATACAACCCCGATGGAGCACTCCTTGCTTGA",
      speciesList: [],
      showView: false,
      key: 0,
      txtPre: null,
    }
  },
  mounted() {
  },
  methods: {
    toHelpClick() {
      this.$router.push('/help')
    },
    async loadPredict() {
      this.loading = true
      this.txtPre = null
      const data = await predict(this.ruleForm);

      if (data) {
        let self = this
        const reader = new FileReader()
        reader.onload = function () {
          self.txtPre = reader.result//获取的数据data
        }
        reader.readAsText(data);
      }

      this.loading = false
    },
    async downloadClick() {
      this.downloadFile(this.txtPre)
    },
    downloadFile(data) {
      if (!data) {
        return
      }
      const element = document.createElement('a')
      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data))
      element.setAttribute('download', "predict_result")
      element.style.display = 'none'
      element.click()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadPredict()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.txtPre = null
      this.$refs[formName].resetFields();
    },
    eg1CLick() {
      this.ruleForm.sequence1 = this.eg1;
    },
    eg2CLick() {
      this.ruleForm.sequence2 = this.eg;
    }
  }
}
</script>

<style lang="stylus" scoped>

.main /deep/ {
  .el-loading-spinner .path {
    stroke: #11427D;
  }
}

.main {
  width 1170px
  margin-top 20px
  padding-top 10px
  font-family: Times New Roman;

  .result {
    font-size 18px
    color #11427D
    font-weight 800
    margin-top 40px
    font-family: Times New Roman;
  }

  .download {
    display flex
    justify-content flex-end
    color #3a3a3a

    .btn {
      cursor pointer
    }
    .titl {
      display inset-block
      margin-right 8px
    }
    i {
      padding 8px
      background-color #eaeaea
    }
  }

  .pre {
    font-size 18px
    //font-family: Times New Roman;
    background-color #fcfcfc;
    padding 0 30px
    margin-top 10px
  }

  #iframe {
    height: 100%;
    width: 100%;
  }

  .title {
    font-size 28px
    text-align left
    margin-bottom 20px
    padding 15px 0
    color #11427D
    font-weight 800
  }

  .subTitle {
    margin-top 20px
    font-size 21px
    color #7a7a7a
    //color #0a2458

    .a {
      color #0a2458
      cursor pointer
      text-decoration underline
    }
    .a:hover {
      color #9c1919
    }
  }

  .middleTitle {
    margin 20px 0 10px 0
    color #11427d
    font-size 16px
    font-weight 600
  }

  .ruleForm {
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    width: 100%;
    padding: 42px 50px;

    .inputWidth {
      width 550px
    }

    .itemTitle {
      margin-left: 160px;
      margin-bottom 15px;
      color #606266
      font-size 24px
    }
  }

  .el-form-item /deep/ {
    label {
      padding 0
      font-size: 20px;
    }

    .el-form-item__content {
      margin-left: 160px !important;
    }

    .el-textarea__inner:focus {
      outline: 0;
      border-color: #11427D;
    }
  }

  .headWarp {
    display flex
    flex-direction column
    align-items center
    margin 80px 60px 60px 60px
    font-weight 900
    font-size 25px
    color #0a2458
    text-align center
    font-family: Times New Roman;

    .line {
      margin-top 10px
      width 200px
      height 1px
      background-color #0a2458
    }
  }

  .el-button--primary /deep/ {
    background-color: #11427D;
    border-color: #11427D;
    border-radius 7px
    margin-right 15px

    span, i {
      font-weight 700
    }
  }

  .inputWidth /deep/ {
    .el-input.is-active .el-input__inner, .el-input__inner:focus {
      border-color: #11427D;
      outline: 0;
    }
  }

  .el-button:hover {
    color: #11427D;
    border-color: #11427D;
    background-color: #e0e5ef;
  }

  .el-checkbox /deep/ {
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #0064bc;
      border-color: #0064bc;
    }

    .el-checkbox__input.is-checked + .el-checkbox__label {
      color #11427D;
    }

    .el-checkbox__label {
      /*color #11427D;*/
    }
  }

  .exampleBtn {
    height 40px
    line-height 40px
    font-size 16px
    border-radius 4px
    padding 0 15px
    color: #11427D;
    border: 1px solid #11427D;
    background-color: #e0e5ef;
    cursor:pointer;
  }
}

</style>
